<template>
  <div id="fileItem-wrap" v-if="showModule('fzscfj')">
    <div class="fileItem-box">
      <p class="hed-title">{{ showModuleName('fzscfj') || '辅助素材附件' }}</p>
      <div class="fileItem-tab">
        <div class="file-intro" v-if="showModule('scmc')">
          <b class="file-intro-title"
            >{{ showModuleName('scmc') || '素材名称' }}：</b
          >
          <div class="file-intro-content">
            {{ knowledgeData.resName || '暂无数据' }}
          </div>
        </div>
        <div class="file-intro" v-if="showModule('scjj')">
          <b class="file-intro-title"
            >{{ showModuleName('scjj') || '素材简介' }}：</b
          >
          <div
            class="file-intro-content"
            v-if="knowledgeData.resDes"
            v-newhtml="knowledgeData.resDes"
          ></div>
          <div class="file-intro-content" v-else>暂无数据</div>
        </div>
        <el-tabs v-model="activeName" type="card" class="file-card">
          <el-tab-pane name="2" v-if="showModule('img')">
            <span slot="label">
              <i class="el-icon-picture"></i>
              {{ showModuleName('img') || '图片' }} {{ imgList.length }}</span
            >
          </el-tab-pane>
          <el-tab-pane name="3" v-if="showModule('video')">
            <span slot="label">
              <i class="el-icon-video-camera-solid"></i>
              {{ showModuleName('video') || '视频' }}
              {{ videoList.length }}</span
            >
          </el-tab-pane>
          <el-tab-pane name="1" v-if="showModule('text')">
            <span slot="label">
              <i class="el-icon-s-order"></i>
              {{ showModuleName('text') || '文本' }} {{ txtList.length }}</span
            >
          </el-tab-pane>
        </el-tabs>
        <div class="fileItem-tab-coment">
          <FileList
            v-if="showModule('text')"
            v-show="activeName == 1"
            :fileList="txtList"
            :type="activeName"
            :checkedFiles="checkedFiles"
            @e-checkedChange="checkedChange"
          />
          <FileList
            v-if="showModule('img')"
            v-show="activeName == 2"
            :fileList="imgList"
            :type="activeName"
            :checkedFiles="checkedFiles"
            @e-checkedChange="checkedChange"
          />
          <FileList
            v-if="showModule('video')"
            v-show="activeName == 3"
            :fileList="videoList"
            :type="activeName"
            :checkedFiles="checkedFiles"
            @e-checkedChange="checkedChange"
          />
          <div class="file-all-btn">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <span
              class="btn txt-hover"
              @click="handleClick('showDialogDownload')"
            >
              <i class="el-icon-download"></i>
              下载</span
            >
            <span
              class="btn txt-hover"
              id="shoppingCar"
              @click="handleClick('showDialogCarList')"
            >
              <i class="el-icon-shopping-cart-full"></i> 加入资源车
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSession } from '@/utils/session'
import { FILETYPE } from '@/utils/config'
import Bus from '@/utils/bus.js'
import homeConfig from '@/mixins/homeConfig'
export default {
  mixins: [homeConfig],
  components: {
    FileList: () => import('./fileList.vue'),
  },
  data() {
    return {
      activeName: '2',
      checkAll: false,
      checkedFiles: [],
      isIndeterminate: true,
      fileList: [],
      txtList: [],
      imgList: [],
      videoList: [],
    }
  },
  props: ['knowledgeData', 'knowledgeFilesList'],
  watch: {
    knowledgeData() {
      this.init()
    },
  },
  mounted() {
    this.init()
    let type = getSession('fileType')
    if (type) {
      this.activeName = type.toString()
    } else {
      this.activeName = '2'
    }
  },
  methods: {
    init() {
      // this.fileList = this.knowledgeData.sysKnowledgeFilesList
      this.fileList = this.knowledgeFilesList
      this.txtList = this.fileList.filter((v) => FILETYPE.file.includes(v.type))
      this.imgList = this.fileList.filter((v) => FILETYPE.img.includes(v.type))
      this.videoList = this.fileList.filter((v) =>
        FILETYPE.video.includes(v.type),
      )
    },
    //下载/加入资源车
    handleClick(e) {
      // 预览模式不触发事件
      // if (this.$route.query.queryMode == 2) {
      //   this.previewTip()
      //   return
      // }
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      //判断是否选择文件
      if (!this.checkedFiles.length) {
        this.$message({
          message: '请先选择文件',
          type: 'warning',
        })
        return
      }
      let files = JSON.parse(JSON.stringify(this.fileList)).filter(
        (v) => this.checkedFiles.indexOf(v.fileId) != -1,
      )
      Bus.$emit(e, files)
    },
    handleCheckAllChange(val) {
      this.checkedFiles = val ? this.fileList.map((v) => v.fileId) : []
      this.isIndeterminate = false
    },
    checkedChange(value) {
      this.checkedFiles = value
      let checkedCount = value.length
      this.checkAll = checkedCount === this.fileList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.fileList.length
    },
  },
}
</script>
<style  lang="scss" >
#fileItem-wrap {
  padding-top: 20px;
  .fileItem-box {
    border: 1px solid rgba(215, 215, 215, 1);
    min-height: 300px;
    position: relative;
    .hed-title {
      position: absolute;
      left: 70px;
      top: -17px;
      background: #fff;
      padding: 0 15px;
      font-size: 20px;
      font-weight: 900;
    }
    .fileItem-tab {
      padding: 30px 20px;
      .file-intro {
        position: relative;
        line-height: 38px;
        font-size: 16px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 16px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #000;
        }
        .file-intro-title {
          // position: absolute;
          // left: 0;
          // top: 0;
          color: #333;
          display: inline-block;
          padding-left: 1em;
        }
        .file-intro-content {
          // padding-left: 95px;
          color: #666;
          display: inline-block;
        }
      }
      .fileItem-tab-coment {
        .file-all-btn {
          margin-top: 20px;
          border-top: 1px solid rgba(215, 215, 215, 1);
          padding-top: 20px;
          .btn {
            display: inline-block;
            cursor: pointer;
            margin-left: 20px;
            i {
              font-weight: 900;
              color: var(--colorH1);
              font-size: 18px;
            }
          }
        }
      }
      .file-card {
        margin-top: 10px;
        i {
          font-size: 16px;
          &.el-icon-picture {
            color: #f56c6c;
          }
          &.el-icon-video-camera-solid {
            color: #e6a23c;
          }
          &.el-icon-s-order {
            color: #67c23a;
          }
        }
      }
    }
  }
}
</style>